<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="base/base :: base_head" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>signalR测试</title>
    <!--    <link rel="stylesheet" type="text/css"
              data-th-href="@{/styles/common.css}" />
    -->
    <script type="text/javascript"
            data-th-src="@{/scripts/MyUtil.js}"></script>

    <script src="http://cdn.bootcss.com/sockjs-client/1.1.1/sockjs.min.js"></script>
    <script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>

    <!--<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>-->
 <!--   <script type="text/javascript"
            data-th-src="@{/scripts/main/ScanTestView.js}"></script>-->
    <!--    <script type="text/javascript"
                data-th-src="@{/lang/lang_zh_CN.js}"></script>-->
    <script type="text/javascript">
     /*   var mainView;
        EUI.onReady(function () {
            mainView = new EUI.ScanTestView({
                renderTo: "content",
            });
        });*/
     var stompClient = null;

     function setConnected(connected) {
         $("#connect").prop("disabled", connected);
         $("#disconnect").prop("disabled", !connected);
         if (connected) {
             $("#conversation").show();
         }
         else {
             $("#conversation").hide();
         }
         $("#greetings").html("");
     }

     function connect() {
         var socket = new SockJS('/gs-guide-websocket');
         stompClient = Stomp.over(socket);
         stompClient.connect({}, function (frame) {
             setConnected(true);
             console.log('Connected: ' + frame);
             stompClient.subscribe('/topic/greetings', function (greeting) {
                 showGreeting(JSON.parse(greeting.body).content);
             });
         });
     }

     function disconnect() {
         if (stompClient !== null) {
             stompClient.disconnect();
         }
         setConnected(false);
         console.log("Disconnected");
     }

     function sendName() {
         stompClient.send("/app/hello", {}, JSON.stringify({'name': $("#name").val()}));
     }

     function showGreeting(message) {
         $("#greetings").append("<tr><td>" + message + "</td></tr>");
     }

     $(function () {
         $("form").on('submit', function (e) {
             e.preventDefault();
         });
         $( "#connect" ).click(function() { connect(); });
         $( "#disconnect" ).click(function() { disconnect(); });
         $( "#send" ).click(function() { sendName(); });
     });
    </script>
</head>
<body>
<!--<div id="content" style="background-color: white"></div>-->
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
    enabled. Please enable
    Javascript and reload this page!</h2></noscript>
<div id="main-content" class="container">
    <div class="row">
        <div class="col-md-6">
            <form class="form-inline">
                <div class="form-group">
                    <label for="connect">WebSocket connection:</label>
                    <button id="connect" class="btn btn-default" type="submit">Connect</button>
                    <button id="disconnect" class="btn btn-default" type="submit" disabled="disabled">Disconnect
                    </button>
                </div>
            </form>
        </div>
        <div class="col-md-6">
            <form class="form-inline">
                <div class="form-group">
                    <label for="name">What is your name?</label>
                    <input type="text" id="name" class="form-control" placeholder="Your name here..."/>
                </div>
                <button id="send" class="btn btn-default" type="submit">Send</button>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table id="conversation" class="table table-striped">
                <thead>
                <tr>
                    <th>Greetings</th>
                </tr>
                </thead>
                <tbody id="greetings">
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>